<template>
  <div class="row justify-content-center" id="container">
        <div class="sale-mt">
            <img src="@/assets/images/02.jpg" class="img1">
            <img src="@/assets/images/01.jpg" class="img2">
         </div>

         <div class="sale">
           <div class="sale-item" v-for="p in products" :key="p.productId">
                <router-link :to="{name:'goodsDetials',query:{data1:JSON.stringify(p)}}">
               <div class="s-img" >
                   <a href="# "><img :src="p.imgs"></a>
               </div>
              <div class="s-info">
                     <a href="#"><p class="s-title">{{p.goodsName}}</p></a>
                     <div class="s-price">￥<b>{{9.90}}</b> <p style="display:none">{{p.marketprice}}</p>
                           <a class="s-buy" href="#">秒杀</a>
                     </div>
              </div>
               </router-link>
           </div>
         </div>
      </div>
       <div class="clear "></div>
</template>

<script>
// import axios from 'axios'
import { ref, onMounted } from 'vue'
import { reqModdle } from '@/api/allMsg'
// import img from './img'
export default {
  name: 'homeMiddle',
  setup () {
    const products = ref('')
    // onMounted(() => {
    //   axios.post('http://127.0.0.1:4523/m1/1261428-0-default/moddle')
    //     .then((res) => {
    //       products.value = res.data.data
    //       console.log('xxx', products.value)
    //     }).catch((err) => {
    //       console.log(err)
    //     })
    // })

    onMounted(async () => {
      const res = await reqModdle()
      products.value = res.data.data
    })

    return {
      products
    }
  }
}
</script>

<style scoped>
 #container{
     width: 92%;
     height: 450px;
     background-color:#b0b436;
     flex-wrap: wrap;
     margin-left: 60px;
     margin-top: 30px;
     /* display: flex; */
    }
    .sale{
      width:92%;
      display: flex;
      justify-content: space-around;
    }

    .sale-item{
        width: 310px;
        height: 345px;
        margin-top: -20px;
        background-color: white;
        /* margin-left: 6px;
        float: left; */
        text-align: center;
    }
    a{
        text-decoration: none;
        color:black;
    }
    .s-price{
        color:red;
        font-size: 24px;
    }
    .s-buy{
        display: block;
        width: 60px;height:30px;
        background-color:red;
        color: #fff;
        font-size: 14px;
        text-align: center;
        margin-left: 5px;
        animation: myfirst 1s ease 1s infinite alternate;
    }
    @keyframes myfirst {
    from {background:red;width: 60px;}
    to {background:rgb(240, 143, 7);width:45px}
  }
    .img1{
       position: absolute;
       height: 80px;
       width: 240px;
       margin-left: 1100px;
    }
    .img2{
        position: absolute;
        margin-left: -8px;
        margin-top: -2px;
        height: 120px;width: 400px;
    }
    .sale{
        /* margin-left: 130px; */
        margin-top: 110px;
        position: absolute;
    }
    .s-img{
        width: 50%;
        transition:all 1s;
        margin-top: 20px;
        margin-left: 50px;
        /* justify-content:space-around; */
    }
    .s-img:hover{
        transform:scale(1.2);
    }
</style>
